<template>
  <div class="app-header">
    <div class="header-left">
      <!-- 菜单折叠按钮 -->
      <el-button 
        text 
        @click="appStore.toggleCollapsed"
        class="collapse-btn"
      >
        <el-icon :size="20">
          <Fold v-if="!appStore.collapsed" />
          <Expand v-else />
        </el-icon>
      </el-button>
      
      <!-- 移动端菜单按钮 -->
      <el-button 
        v-if="appStore.device === 'mobile'"
        text 
        @click="appStore.toggleMobileMenu"
        class="mobile-menu-btn"
      >
        <el-icon :size="20">
          <Menu />
        </el-icon>
      </el-button>
      
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item 
          v-for="item in breadcrumbs" 
          :key="item.path"
          :to="item.path"
        >
          {{ item.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <div class="header-right">
      <!-- 全屏按钮 -->
      <el-tooltip content="全屏" placement="bottom">
        <el-button text @click="toggleFullscreen" class="action-btn">
          <el-icon :size="18">
            <FullScreen />
          </el-icon>
        </el-button>
      </el-tooltip>
      
      <!-- 主题切换 -->
      <el-tooltip content="主题切换" placement="bottom">
        <el-button text @click="appStore.toggleTheme" class="action-btn">
          <el-icon :size="18">
            <Sunny v-if="appStore.theme === 'light'" />
            <Moon v-else />
          </el-icon>
        </el-button>
      </el-tooltip>
      
      <!-- 消息通知 -->
      <el-badge :value="notificationCount" :hidden="notificationCount === 0">
        <el-button text class="action-btn">
          <el-icon :size="18">
            <Bell />
          </el-icon>
        </el-button>
      </el-badge>
      
      <!-- 用户菜单 -->
      <el-dropdown @command="handleUserCommand" class="user-dropdown">
        <div class="user-info">
          <el-avatar :size="32" :src="userStore.userInfo?.avatar">
            {{ userStore.userInfo?.username?.charAt(0) }}
          </el-avatar>
          <span class="username">{{ userStore.userInfo?.username }}</span>
          <el-icon><ArrowDown /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">
              <el-icon><User /></el-icon>
              个人中心
            </el-dropdown-item>
            <el-dropdown-item command="settings">
              <el-icon><Setting /></el-icon>
              系统设置
            </el-dropdown-item>
            <el-dropdown-item divided command="logout">
              <el-icon><SwitchButton /></el-icon>
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Fold,
  Expand,
  Menu,
  FullScreen,
  Sunny,
  Moon,
  Bell,
  ArrowDown,
  User,
  Setting,
  SwitchButton
} from '@element-plus/icons-vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const route = useRoute()
const appStore = useAppStore()
const userStore = useUserStore()

const notificationCount = ref(3)

// 面包屑导航
const breadcrumbs = computed(() => {
  const matched = route.matched.filter(item => item.meta?.title)
  return matched.map(item => ({
    title: item.meta?.title,
    path: item.path
  }))
})

// 全屏切换
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}

// 用户菜单操作
const handleUserCommand = async (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/profile/info')
      break
    case 'settings':
      router.push('/system/settings')
      break
    case 'logout':
      try {
        await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await userStore.logout()
        router.push('/login')
        ElMessage.success('退出登录成功')
      } catch (error) {
        // 用户取消
      }
      break
  }
}
</script>

<style lang="scss" scoped>
.app-header {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: #fff;

  .header-left {
    display: flex;
    align-items: center;
    gap: 16px;

    .collapse-btn,
    .mobile-menu-btn {
      padding: 8px;
      
      &:hover {
        background: #f5f7fa;
      }
    }

    .breadcrumb {
      :deep(.el-breadcrumb__item) {
        .el-breadcrumb__inner {
          color: #606266;
          
          &:hover {
            color: #409EFF;
          }
        }
        
        &:last-child .el-breadcrumb__inner {
          color: #303133;
          font-weight: 500;
        }
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 8px;

    .action-btn {
      padding: 8px;
      
      &:hover {
        background: #f5f7fa;
      }
    }

    .user-dropdown {
      .user-info {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 8px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;

        &:hover {
          background: #f5f7fa;
        }

        .username {
          font-size: 14px;
          color: #303133;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .app-header {
    padding: 0 16px;

    .header-left {
      .breadcrumb {
        display: none;
      }
    }

    .header-right {
      .action-btn {
        display: none;
      }
    }
  }
}
</style>